<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div class="head_box">
        <h2>后台管理系统</h2>
      </div>
      <el-button type="info" @click="logout">退出</el-button></el-header
    >
    
    <el-container>
      <!-- 侧边栏 -->
      <!-- <el-scrollbar > -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <el-menu
            background-color="#052b46"
            text-color="#fff"
            active-text-color="#ffd04b"
            :default-active="activeIndex"
           
            :collapse="isCollapse"
            :collapse-transition="false"
            :router="true"
          >
            <!-- 折叠展开功能 -->
            <div class="toggle" @click="toggle">|||</div>
            <!-- 一级菜单 -->
            <el-submenu
              :index="'/' + menu.path"
              v-for="menu of menusList"
              :key="menu.id"
            >
              <!-- 一级菜单的模板区域 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-location"></i>
                <!-- 文本 -->
                <span>{{ menu.authName }}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item
                :index="'/' + item.path"
                v-for="item of menu.children"
                :key="item.id"
                @click="saveActive('/' + item.path)"
              >
                <!-- 二级菜单的模板区域 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>{{ item.authName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
      <!-- </el-scrollbar> -->
      <!-- 主体区域 -->
      <!-- <el-scrollbar style="width: 100%; height: 100%"> -->
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      <!-- </el-scrollbar> -->
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      //侧边栏菜单数据
      menusList: [],
      //侧边栏展开/折叠
      isCollapse: false,
      //二级菜单保持激活状态和颜色高亮
      activeIndex: '',
    }
  },
  created() {
    this.getMenuList(),
      (this.activeIndex = sessionStorage.getItem('activeIndex'))
  },
  methods: {
    //退出功能,清除token,跳转到登录页
    logout() {
      sessionStorage.removeItem('token')
      this.$router.replace('/login')
    },
    //获取侧边栏菜单数据
    async getMenuList() {
      let {
        data: { data: res, meta },
      } = await this.$api.getMenus()
      if (meta.status === 200) {
        this.menusList = res
      } else {
        this.$message.error(meta.msg)
      }
    },
    //侧边栏折叠/展开功能
    toggle() {
      this.isCollapse = !this.isCollapse
    },
    //刷新/跳转页面保持页面原先的激活状态
    saveActive(indexPath) {
      //将激活状态的path保存起来
      sessionStorage.setItem('activeIndex', indexPath)
      this.activeIndex = indexPath
    },
  },
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
  .el-header {
    background-color: #001b58;
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border-bottom:solid 1px white;
    .head_box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 30px;
      h2 {
        height: 40px;
        line-height: 40px;
        color: white;
      }
    }
  }

  .el-aside {
    background-color: #052b46;
    height: 100% !important;
    .toggle {
      line-height: 24px;
      height: 24px;
      text-align: center;
      color: white;
      font-size: 12px;
      letter-spacing: 0.2em;
      background-color: rgb(109, 107, 107);
    }
    .el-menu {
      border-right: none;
      height: 100%;
    }
  }

  .el-main {
    width: 100%;
    height: 100%;
    background-color: #e9eef3;
  }
}
</style>
